<template>
	<page class="" ref='page' top='100rpx'>
		<!-- lh jzc  此页面需要调整 wwl-->
		<!-- <view class="tabber_box">
			<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
		</view>
		<view class="tabber_box_title_static">
		</view>
		<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
			<view class="left" @click="citySelete">
				<view class="city">
					{{getters.addressSelect ? getters.addressSelect.name : '请选择'}}
				</view>
				<image src="../static/img/orientation1.png" mode="" class="img"></image>
			</view>
			<view class="title">
				选工匠
			</view>
		</view> -->
		<view class="search">
			<view class="search_box">
				<input type="text" v-model='title' maxlength="20" confirm-typ="search" @confirm="page = 1;getList()" class="select_text2" :focus="isFocus" @focus='isFocus = true' @blur='isFocus = false'/>
				<view class="select_text1" v-if='!title && !isFocus' @click="isFocus = true">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill" ></image>
					<text>请输入店铺名称</text>
				</view>
			</view>
		</view>
		<view class="list_box">
			<block v-if='list && list.length > 0'>
				<renovationShop v-for='(row,index) in list' :key='index' :row='row' type='findCraftsman' :source='source' :offer='offer' :duihuan='duihuan' />
				<loadingText :type="loading || page * size < total" />
			</block>
			<view style='padding-top:200rpx' v-else>
				<empty :status='2' />
			</view>
		</view>
		<!-- <tabbar ref='tabbar' active='3' /> -->
	</page>
</template>
<script>
	import {
		getFindCraftsman
	} from "../../utils/getRequest.js"
	import renovationShop from "@/components/renovation-shop.vue"
	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			renovationShop,
			tabbar
		},
		props: {
			isTouchBottom: {
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {
				title: '',
				source:0,
				isFocus:false,
				list: [],
				total: 0,
				page: 1,
				size: 10,
				loading: false,
				cityId:'',
				duihuan:0,
				offer:''
			}
		},
		methods: {
			citySelete() {
				uni.navigateTo({
					url: '/pagesHome/city'
				});
			},
			async getList() {
				this.loading = true
				if(this.page == 1) uni.showLoading()
				try {
					var res = await getFindCraftsman({
						page: this.page,
						limit: this.size,
						title: this.title ? this.title.trim() : '' ,
						zone_id:this.getters.addressSelect ? this.getters.addressSelect.id : '',
						build_city_id: this.$store.state.addressSelect ? this.$store.state.addressSelect.id :
							null,
						user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
					})
					this.list = this.page == 1 ? res.list : [...this.list, ...res.list]
					this.total = res.count
					this.loading = false
					// if(res.shopcount < 1){
					// 	uni.showToast({title:'您的档案地址服务商家不足1个，已为您展示其他服务商家',icon:'none',duration:2000})
					// }
					if(this.page == 1) uni.hideLoading()
					uni.stopPullDownRefresh()
				} catch {
					this.loading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
				}
			},
		},
		onReachBottom(){
			if (this.page * this.size >= this.total || this.loading) return
			this.page++
			this.getList()
		},
		onPullDownRefresh(){
			this.page = 1
			this.getList()
		},
		watch: {
			currentAddress(x) {
				this.page = 1
				this.getList()
			},
		},
		onLoad(params) {
			if(params.offer) this.offer = params.offer
			if(params.source) this.source = params.source
			if (this.$store.state.currentArea && !this.$store.state.addressSelect) {
				this.$store.commit('setAddressSelect', {
					id: this.$store.state.currentArea.cityId,
					name: this.$store.state.currentArea.cityName
				})
				this.getList()
			} else {
				this.getList()
			}
			this.cityId = this.getters.addressSelect ? this.getters.addressSelect.id : ''
		},
		onShow(){
			if( this.getters.addressSelect && this.cityId !=  this.getters.addressSelect.id){
				this.cityId =  this.getters.addressSelect.id
				this.page = 1
				this.getList()
			}else{
				var option = this.$global.$editUploadBack(4, 'findCraftsmanLike')
				if(option && option.id && this.list.findIndex(x=>x.id == option.id) != -1){
				var index = this.list.findIndex(x=>x.id == option.id)
					if(index != -1){
						this.list[index].is_like = this.list[index].like > option.like ? 2 : 1
						this.list[index].like = option.like
					}
				}
			}
		},
		computed: {
			currentAddress() {
				return this.$store.state.currentArea
			}
		},
	}
</script>

<style lang="scss" scoped>
	.list_box {
		margin: 172rpx 36rpx 30rpx;
		min-height: 60vh;
	}

	.tabber_box .tabber_box_static {
		width: 100%;
		background: #36353a;
	}

	.tabber_box .tabber_box_flex {
		width: 100%;
		background: #36353a;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.tabber_box_title_static {
		height: 80rpx;
		width: 100%;
		background: #36353a;
	}

	.tabber_box_title_flex {
		background: #36353a;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 700;
		text-align: center;
		color: #000000;

		.left {
			position: absolute;
			left: 58rpx;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;

			.city {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #ffffff;
				max-width: 200rpx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				word-break: break-all;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}
		}

		.title {
			width: 144rpx;
			height: 66rpx;
			font-size: 48rpx;
			font-family: PingFang SC, PingFang SC-Semibold;
			font-weight: 600;
			text-align: left;
			color: #ffffff;
		}
	}

	.search {
		width: 100%;
		height: 140rpx;
		background: #f3f3f3;
		position: fixed;
		z-index: 9999;
		padding: 40rpx 36rpx 0;
		box-sizing: border-box;
		.search_box{
			position: relative;
		}
		.select_text2{
			width: 100%;
			height: 64rpx;
			background: #ffffff;
			border-radius: 32rpx;
			font-size: 28rpx;
			line-height: 64rpx;
			color:#333;
			text-align: center;
			// padding: 0 26rpx ;
			box-sizing: border-box;
		}
		.select_text1{
			font-size: 28rpx;
			color:#ADADAD;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	}

	
	.imgs {
		width: 44rpx;
		height: 44rpx;
		position: fixed;
		z-index: 99;
		right: 36rpx;
		top: 330rpx;
		overflow: hidden;
	}
</style>
